<template>
    <component 
        :is="comList[tplIndex]" 
        v-bind="opt" 
        :info="info" 
        :labelWidth="labelWidth"
        :logoPath="logoPath" 
        :isTpl="false"
        class="myLabel"
        @passCode="value=>$emit('passCode', value)"  
    ></component>   
</template>

<script setup>
    import { ref, computed, watch } from 'vue';
    import BarCodeTpl1 from './barCodeTpls/1.vue';
    import BarCodeTpl2 from './barCodeTpls/2.vue';
    import BarCodeTpl3 from './barCodeTpls/3.vue';
    import BarCodeTpl4 from './barCodeTpls/4.vue';
    import BarCodeTpl5 from './barCodeTpls/5.vue';
    import BarCodeTpl6 from './barCodeTpls/6.vue';
    import QRCodeTpl1 from './qrCodeTpls/1.vue';
    import QRCodeTpl2 from './qrCodeTpls/2.vue';
    import QRCodeTpl3 from './qrCodeTpls/3.vue';
    import QRCodeTpl4 from './qrCodeTpls/4.vue';

    const barCodeList = [BarCodeTpl1, BarCodeTpl2, BarCodeTpl3, BarCodeTpl4, BarCodeTpl5, BarCodeTpl6]; 
    const qrCodeList = [QRCodeTpl1, QRCodeTpl2, QRCodeTpl3, QRCodeTpl4];

    const opt = ref({}); 
    const props = defineProps({
        tplIndex:{ type:Number },
        checked:{ type:Array },
        checkCode:{ type:String },
        checkList:{ type:Array },
        info:{ type:Object },
        logoPath:{ type:String },
        labelType:{ type:String },
        labelWidth:{ type:Number },
    });
    
    const comList = computed(()=>{
        return props.labelType === '1' ? barCodeList : qrCodeList;
    })
    
    watch(()=>props.checked, ()=>{
        
        opt.value = props.checkList.reduce((sum, cur)=>{
            let temp = 'has' + ( cur.value[0].toUpperCase() + cur.value.slice(1, cur.value.length));  
            sum[temp] = props.checked.includes(cur.value);
            return sum;
        }, {})
    })
</script>
